<template>
    <popup
        ref="popRef"
        width="auto"
        title="生成海报"
        :append-to-body="false"
        :click-modal-close="true"
        confirmButtonText=""
        cancelButtonText=""
    >
        <div class="p-5">
            <div  ref="posterRef" class="w-[430px] bg-[#F8F8FB] rounded-[10px]">
                <div class="flex justify-center bg-[#F2F3F6] rounded-t-[10px] overflow-hidden">
                    <img
                        class="w-full object-contain"
                        :src="details.thumbnail || details.image_loc"
                        alt="img"
                    />
                </div>

                <div class="p-4 ">
                    <div class="title text-[16px] font-medium text-[#101010] line-clamp-2">
                        {{
                            details?.prompt_in || details.prompt_en
                        }}
                    </div>
                </div>

                <div v-if="isUser" class="px-[15px]">
                    <el-divider border-style="solid" class="!mt-1" />
                </div>

                <div v-if="isUser" class="px-[16px] pb-[20px]">
                    <div class="flex items-center">
                        <el-avatar :src="userStore.users.avatar" />
                        <div class="ml-2">{{ userStore.users.nickname }}</div>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="flex px-5 pb-3">
                <el-button
                    class="flex-1"
                    text
                    bg
                    plain
                    size="large"
                    @click="copy('')"
                >
                    复制链接
                </el-button>
                <el-button
                    class="flex-1"
                    type="primary"
                    size="large"
                    @click="handleDownload"
                >
                    下载海报
                </el-button>
            </div>
        </template>
    </popup>
</template>

<script lang="ts" setup>
import useUserStore from '~/stores/user'
import downloadUtil from '~/utils/download'

withDefaults(
    defineProps<{
        isUser?: boolean;
    }>(),
    {
        isUser: true
    }
)

const popRef = shallowRef()
const posterRef = shallowRef()

const { copy } = useCopy()
const userStore = useUserStore()

// 绘画信息
const details = ref({} as SquareDrawsResponse)

/**
 * 下载海报
 *
 * @author zero
 */
const downloadLoading = ref(false)
const handleDownload = async () => {
    try {
        downloadLoading.value = true
        await downloadUtil.html2Image(posterRef.value)
    } catch {
        feedback.msgError('下载失败')
    } finally {
        downloadLoading.value = false
    }
}

/**
 * 打开弹窗
 *
 * @param {SquareDrawsResponse} option
 * @author zero
 */
const open = (option: SquareDrawsResponse) => {
    popRef.value.open()
    details.value = option
}

defineExpose({
    open
})
</script>
